<!DOCTYPE html>
<html lang="en">
<!-- 作者：向志祥 -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>影院</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>
            <a href="../Cinema/Cinema.html" class="layui-btn layui-btn-sm">返回</a>
            <span id="spanTitle"></span>
        </legend>
    </fieldset>
    <div style="float:left;margin-left: 20px">
        <h2 style="text-align:center; margin: 15px 0; color:#1E9FFF">当前院线已上映电影表</h2>
        <table id="left" lay-filter="test"></table>
    </div>
    <div style="float:right;margin-right: 50px">
        <h2 style="text-align:center; margin: 15px 0; color:#FF5722">当前院线未上映电影表</h2>
        <table id="right" lay-filter="test"></table>
    </div>
    <script src="../layui/layui.js"></script>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/lodash.min.js"></script>
    <script src="../js/common.js"></script>
    <script>
        function query(url) {
            const q = {};
            _.last(url.split("?")).split("&")
                .map(it => it.split("="))
                .forEach(([p, v]) => {
                    q[p] = decodeURIComponent(v);
                });
            return q;
        };
        const c = query(location.href);
        async function yingyuan() {
            const data = await $.getJSON("/api/Cinema/" + c.cid);
            $("#spanTitle").text(data.name);
        }
        yingyuan();
        layui.use(['element', 'table', 'layer'], function (data) {
            const table = layui.table;
            const layer = layui.layer;
            table.render({
                elem: '#left',
                width: 600,
                hight: 500,
                url: '/api/MovieAndCinema',
                autoSort: true,
                page: true,
                autoSort: false,
                toolbar: true,
                defaultToolbar: ['filter', 'print', 'exports'],
                cols: [[
                    { field: 'movie', title: '名称', templet: `<div>{{d.movie.name}}</div>`, sort: true, align: 'center' },
                    { field: 'movie', title: '类型', templet: `<div>{{d.movie.type}}</div>`, sort: true, align: 'center' },
                    { field: 'movie', title: '时长', templet: `<div>{{d.movie.time}}</div>`, sort: true, align: 'center' },
                    { field: 'movie', title: '评分', templet: `<div>{{d.movie.score}}</div>`, sort: true, align: 'center' },
                    { title: "操作", templet: "#tabOperationLeft", width: 150, align: 'center' },
                ]]
            })
            table.render({
                elem: '#right',
                url: '/api/MovieAndCinema/unused',
                width: 600,
                hight: 500,
                autoSort: true,
                page: true,
                autoSort: false,
                toolbar: "#tb",
                defaultToolbar: ['filter', 'print', 'exports'],
                cols: [[
                    { field: 'name', title: '名称', sort: true, align: 'center' },
                    { field: 'type', title: '类型', sort: true, align: 'center' },
                    { field: 'time', title: '时长', sort: true, align: 'center' },
                    { field: 'score', title: '评分', sort: true, align: 'center' },
                    { title: "操作", templet: "#tabOperationRight", align: 'center' },
                ]]
            })
            table.on('sort(test)', function (obj) {
                tabObj.reload({
                    initSort: obj,
                    where: {
                        field: obj.field,
                        order: obj.type //排序方式
                    }
                });
            });
            if (c.cid) {
                table.reload("left", {
                    where: {
                        cid: c.cid
                    }
                });
                table.reload("right", {
                    where: {
                        cid: c.cid
                    }
                });
            }
        })
    </script>

    <script type="text/html" id="tabOperationRight">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="shangying('{{d._id}}',this)">上映</button>
    </div>
   </script>
    <script type="text/html" id="tb">
        <div class="layui-table-tool-temp" style="height:40px">
           <form class="inline-block search-form" onsubmit="return false;">
            <input type="text" placeholder="关键字查询" class="layui-input search-input chaxun_text">
            <button class="search-btn" onclick="chaxun($('.chaxun_text').val())" lay-event="search" style="position: relative;left: 307px;top: -33px;opacity: .5;">
                <i class="layui-icon layui-icon-search"></i>
            </button>
           </form>
        </div>
    </script>

    <script type="text/html" id="tabOperationLeft">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" onclick="changci('{{d._id}}')">场次({{d.screens.length}})</button>
    </div>
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="xiaying('{{d._id}}',this) ">下映</button>
    </div>
   </script>
    <script>
        function shangying(id, btn) {
            layer.confirm("确定上映该电影吗？", { title: "信息" }, function (index) {
                layer.close(index);
                $(btn).parents("tr").remove();
                $.post("/api/MovieAndCinema", {
                    movie: id,
                    cinema: c.cid
                }, function (dada) {
                    layui.table.reload("left");//表格重置
                })
            })
        }
        function xiaying(id, btn) {
            layer.confirm("确定下映该电影吗？", { title: "信息" }, function (index) {
                $.ajax({
                    url: "/api/MovieAndCinema/" + id,
                    method: "delete"
                });
                $(btn).parents("tr").remove();
                layer.close(index);
                layui.table.reload("right");//表格重置
            })
        }
        function chaxun(key) {
            if (key) {
                layui.table.reload("right", {
                    where: {
                        key,
                        page: {
                            curr: 1
                        }
                    }
                });
            } else {
                layer.msg("关键字不能为空!", {
                    icon: 2,
                    time: 1000 //（如果不配置，默认是3秒）
                })
            }
        }
        function changci(id) {
            layui.layer.open({
                type: 2,
                content: './changci.html?id=' + id,
                area: ['500px', '500px'],
                end: function () {
                    layui.table.reload("left");
                }
            })
        }
    </script>
</body>

</html>